<template>
  <!-- 收集组件 -->
  <div class="main">
    <div class="main_box">
      <!-- 左 -->
      <div class="left">
        <!-- 随笔标题 -->
        <div class="essays-title">动态</div>

        <!--用户信息大盒子 -->
        <div class="essays-userinfo-box">
          <!-- 用户头像 -->
          <div class="user-portrait">
            <img src="" alt="" />
          </div>
          <!--  用户名等信息 -->
          <div class="user-info">
            <!-- 名字 -->
            <div class="user-name"><a href="javascript:;">张三</a></div>
            <!-- 个性签名 -->
            <div class="user-autograph">
              个性签名&nbsp;/&nbsp; <span class="over">已收录</span>
            </div>
          </div>
        </div>

        <!-- 动态内容 大盒子-->
        <div class="esseays-content-box">
          <!-- 内容 -->
          <div
            class="content-box animate__animated animate__fadeInUp"
            v-for="item in num"
            :key="item"
          >
            <!-- 时间 -->
            <span class="content-date"
              ><i class="iconfont">&#xe617;</i> &nbsp;13天前</span
            >
            <!-- 内容 -->
            <div class="content">
              <div class="content-box-son">
                <!-- 图片 -->
                <div class="img-box">
                  <img src="" alt="" />
                </div>
                <!-- 图片下的盒子 -->
                <div class="contentFoot-box">
                  <!-- 点赞和评论 -->
                  <span class="like-comment">
                    <span class="like iconfont">&#xe86f;&nbsp;点赞</span>
                    <span class="comment iconfont">&#xe665;&nbsp;评论</span>
                  </span>
                  <!-- 查看评论 -->
                  <div class="ess-comment iconfont">查看评论&nbsp;&#xe628;</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右 -->
      <div class="register">
        <MyInfo></MyInfo>
        <Notice></Notice>
        <Mydate></Mydate>
        <NewReply></NewReply>
        <Tags></Tags>
      </div>
    </div>
  </div>
</template>

<script>
  // 右
  import MyInfo from '@/components/register/MyInfo.vue';
  import Notice from '@/components/register/Notice.vue';
  import Mydate from '@/components/register/Mydate.vue';
  import NewReply from '@/components/register/NewReply.vue';
  import Tags from '@/components/register/Tags.vue';
  export default {
    name: 'Essays',
    data() {
      return {
        num: [1, 2],
        i: 3,
      };
    },
    components: {
      MyInfo,
      Notice,
      Mydate,
      NewReply,
      Tags,
    },
    methods: {
      //  滚动加载图片
      scrollLoadPro() {
        //  获取窗口高度winHeight 滚动出去的长度st 文档的长度docHeight
        let winHeight =
          window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight;
        let st =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        let docHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        //  窗口高度winHeight+滚动出去的长度st>文档的长度docHeight 就表示触底了
        if (winHeight + st > docHeight) {
          this.num.push(this.i++);
        }
      },
    },
    created() {},
    mounted() {
      // this.goItemB(this.active);
      // 注册滚动事件
      window.addEventListener('scroll', this.scrollLoadPro);
    },
    beforeDestroy() {
      // 移除滚动事件
      window.removeEventListener('scroll', this.scrollLoadPro);
    },
  };
</script>
<style lang="less" scoped>
  @import url('../../state/mainPublic.less');
  @import url('../../state/css/barList/essays.less');
</style>
